.input {
  border: 3px solid #ae7000;
}

.show {
  /* opacity: 1;
  transition: all 1.5s ease-in; */
  animation: show-item 2s ease-in forwards;
}

.hide {
  /* opacity: 0; */
  /* transition: all 1.5s ease-in; */
  animation: hide-item 2s ease-in forwards;
  /* forwards 运行到最后一帧停止 */
}

@keyframes hide-item {
  0% {
    opacity: 1;
    color: yellow;
  }
  50% {
    opacity: 0.5;
    color: red;
  }
  100% {
    opacity: 0;
    color: green;
  }
}

@keyframes show-item {
  0% {
    opacity: 0;
    color: yellow;
  }
  50% {
    opacity: 0.5;
    color: red;
  }
  100% {
    opacity: 1;
    color: green;
  }
}

.boss-text-enter {
  /* 入场 */
  opacity: 0;
}

.boss-text-enter-active {
  /* 一直到入场结束 */
  opacity: 1;
  transition: opacity 2000ms;
}

.boss-text-enter-done {
  /* 入场结束 */
  opacity: 1;
}

.boss-text-exit {
  /* 离场开始 */
  opacity: 1;
}

.boss-text-exit-active {
  /* 一直到离场结束 */
  opacity: 0;
  transition: opacity 2000ms;
}

.boss-text-exit-done {
  /* 离场结束 */
  opacity: 0;
}